<template>
	<view class="index">
		<!-- #ifndef MP-ALIPAY -->
			<cu-custom bgColor="bg-gradual-blue" :isBack="false">
				<block slot="backText">返回</block>
				<block slot="content">CNODEJS社区</block>
			</cu-custom>
		<!-- #endif -->
		<scroll-view scroll-x class="bg-gradual-blue nav text-center" :class="top>10? 'index-fixed':''" :style="{'top':(top > 10?customBar+'rpx':'none')}">
			<view class="cu-item" :class="'all'==TabCur?'text-white cur':''" @tap="tabSelect" data-id="all">
				<text class="cuIcon-camerafill"></text> 全部
			</view>
			<view class="cu-item" :class="'good'==TabCur?'text-white cur':''" @tap="tabSelect" data-id="good">
				<text class="cuIcon-upstagefill"></text> 精华
			</view>
			<view class="cu-item" :class="'share'==TabCur?'text-white cur':''" @tap="tabSelect" data-id="share">
				<text class="cuIcon-clothesfill"></text> 分享
			</view>
			<view class="cu-item" :class="'ask'==TabCur?'text-white cur':''" @tap="tabSelect" data-id="ask">
				<text class="cuIcon-questionfill"></text> 问答
			</view>
			<view class="cu-item" :class="'job'==TabCur?'text-white cur':''" @tap="tabSelect" data-id="job">
				<text class="cuIcon-noticefill"></text> 招聘
			</view>
		</scroll-view>
		<view class="index-scroll">
			<view class="cu-list menu-avatar">
				<view :data-url="'../details/details?id='+item.id" @tap="toDetails" class="cu-item" v-for="item in lists" :key="item.id">
					<view class="cu-avatar radius lg" :style="{'background-image':'url('+item.author.avatar_url+')'}"></view>
					<view class="content">
						<view>
							<view class="text-cut">{{item.title}}</view>
							<view class="cu-tag round bg-red sm" v-if="item.top">置顶</view>
							<block v-else>
								<view class="cu-tag round bg-orange sm" v-if="item.good">精华</view>
								<block v-else>
									<view class="cu-tag round bg-blue sm" v-if="item.tab=='ask'">问答</view>
									<view class="cu-tag round bg-yellow sm" v-if="item.tab=='share'">分享</view>
									<view class="cu-tag round bg-green sm" v-if="item.tab=='job'">招聘</view>
									<view class="cu-tag round bg-orange sm" v-if="item.tab=='good'">精华</view>
								</block>
							</block>
						</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut"> {{item.reply_count+'/'+item.visit_count}}</view>
						</view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">{{item.last_reply_at|handlTime}}</view>
						<view class="cu-tag round bg-red sm">5</view>
					</view>
				</view>
			</view>
			<view class="cu-load" :class="!isLoad?'loading':'over'"></view>
		</view>
		<view class="index-top-btn text-sl" :class="showTopBtn ? 'index-top-showBtn' : 'index-top-hideBtn'" @tap="backToTop">
			<view class="cuIcon-top"></view>
		</view>
	</view>
</template>

<script>
	import _ from 'underscore'
	export default {
		data() {
			return {
				TabCur: 'all',
				scrollLeft: 0,
				customBar: 0,
				page: 1,
				tab: '',
				limit: 10,
				lists: [],
				requestFinish: true,
				isLoad: false,
				top: 0,
				showTopBtn: false
			}
		},
		onLoad() {
			const customBar = this.CustomBar * this.pxToRpx
			this.customBar = customBar
			
			this.getTopics()
		},
		watch: {
			'TabCur'(val) {
				this.lists = [];
				this.page = 1;
				this.tab = val;
				this.getTopics();
			}
		},
		methods: {
			tabSelect(e) { //tab切换
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			async getTopics() { //获取主题列表
				const res = await this.$api.getTopics({
					page: this.page,
					tab: this.tab,
					limit: this.limit
				})
				this.lists = res
			},
			async getMoreTopics() { //加载更多
				if(!this.isLoad) {
					if(this.requestFinish) {
						let page = this.page;
						page++;
						this.requestFinish = false;
						const res = await this.$api.getTopics({
							page: page,
							tab: this.tab,
							limit: this.limit
						})
						this.page = page;
						this.lists = [...this.lists,...res]
						this.requestFinish = true;
						if(res.length < this.limit) {
							this.isLoad = true;
						}
					}
				}
			},
			async handelRefresh() { //下拉刷新
				try{	
					this.page = 1;
					this.lists = [];
					await this.getTopics();
					this.$nextTick(function(){
						uni.stopPullDownRefresh()
					})
				}catch(err){}
			},
			onPageScroll: _.throttle(function(e) { //监听页面滚动
				this.top = e.scrollTop;
				if(e.scrollTop > 1000) {
					this.showTopBtn = true
				}else {
					this.showTopBtn = false
				}
			},1000),
			backToTop() { //回到顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			toDetails(e) { //跳转到详情页
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url
				});
			},
			onPullDownRefresh() { //监听用户下拉动作
				this.handelRefresh();
			},
			onReachBottom() { //页面滚动到底部的事件
				this.getMoreTopics();
			}
		}
	}
</script>

<style>
	.index-list {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
	}
	.index-top-btn {
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #EEEEEE;
		color: rgba(0,0,0,.5);
		border-radius: 50%;
		font-size: 60rpx;
		position: fixed;
		bottom: 80rpx;
		right: 30rpx;
	}
	.index-top-hideBtn {
		display: none;
	}
	.index-top-showBtn {
		display: block;
	}
	.index-fixed {
		position: fixed;
		left: 0;
		z-index: 9;
	}
</style>
